<template>
  <div class="assets_detail">
    <div class="assets_H">
      <div class="assets_H_title">参保卡类型列表</div>
      <el-form :inline="true" :model="integral" class="demo-form-inline">
        <!-- <el-form-item label="发售卡时间：">
          <el-date-picker
            v-model="integral.startTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item> -->
        <el-form-item label="卡类型：">
          <el-select v-model="integral.cardType" placeholder="全部">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发售状态：">
          <el-select v-model="integral.cardStatus" placeholder="全部">
            <el-option
              v-for="item in statusOptions"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="卡名称：">
          <el-input
            v-model="integral.cardName"
            placeholder="请输入卡名称"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="serach">查询</el-button>
          <el-button @click="setReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="assets_B">
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:validityTypOperate="{ scope }">
          <div v-if="scope.row.validityType == 19">{{scope.row.usableCount}}天</div>
              <div v-else>{{scope.row.validityTypeDict}}</div>
        </template>
        <template v-slot:operate="{ scope }">
          <el-button size="small" @click="lookDetail(scope.row.assetId)"
            >预付卡报备详情</el-button
          >
        </template>
      </ex-table>
    </div>
    <ReportingDetail  ref="reportingDetail"   />  
  </div>
     
</template>
<script>
// import { cardList, adminDict } from "@/api/merchants";
import ReportingDetail from "./reportingDetail";
import { getInsuranceList } from "@/api/insuranceUnderwriting";
import { adminDict } from "@/api/setting";
import handlePageMixin from "@/mixins/handlePageMixin";
export default {
  name: "publicCard",
  components: {
       ReportingDetail
  },
  mixins: [handlePageMixin],
  inject: ["merchantId"],
  data() {
    return {
      loading: false,
      integral: {
        cardName: "", //卡名称
        cardType: "", //卡类型 asset_card_type
        cardStatus: "", //状态 asset_status
      },
      options: [],
      statusOptions:[],
      tableData: [],
      tableColumn: [
        // { prop: "cardId", label: "卡编号", width: "140" },
        { prop: "cardTypeDict", label: "卡类型", width: "100" ,slotName: "cardType" },
        { prop: "name", label: "卡名称", width: "150" },
        { prop: "statusDict", label: "发售状态", width: "150" },
        { prop: "createTime", label: "发卡时间", width: "150" },
        { slot: true, slotName: "validityTypOperate",label: "有效期", width: "120" },
        { prop: "issueTotal", label: "计划发售数量", width: "160" },
        { prop: "buyMoney",label: "发售金额/张",width: "150"},
        { prop: "useCardTotal", label: "已发售卡/张", width: "150" },
        { prop: "buyMoneyTotal",label: "购卡金额",width: "150"},
        { prop: "cardBalanceMoney",label: "现金金额",width: "150"},
        { prop: "superviseMoney", label: "卡监管金额", width: "150" },
        { label: "操作", slot: true, slotName: "operate", width: "190" ,fixed: 'right',},
      ],
    };
  },
  created() {
    // this.getList();
  },
  mounted() {
    this.getlinkagelist();
    this.getstatuslist();
    this.getList();
  },
  methods: {
    getlinkagelist() {
      //获取卡类型字典
      const params = {
        dictType: "asset_card_type",
      };
      adminDict(params).then((res) => {
        var arr = [
          {
            id: "",
            value: "全部",
          },
        ];
        this.options = arr.concat(res.result[0].dictList);
        this.options.splice(5,3)
        // console.log("this.options", this.options);
      });
    },
    getstatuslist() {
      //获取发售状态字典
      const params = {
        dictType: "asset_status",
      };
      adminDict(params).then((res) => {
        var arr = [
          {
            id: "",
            value: "全部",
          },
        ];
        this.statusOptions = arr.concat(res.result[0].dictList);
        // console.log("this.options", this.options);
      });
    },
    serach() {
      console.log(this.integral);
      this.pageOptions.pageNum = 1;
      this.getList();
    },
    //重置
    setReset() {
      this.integral.cardName = '';
      this.integral.cardType = '';
      this.integral.cardStatus = '';
      this.pageOptions.pageNum = 1;
      // this.currentNavtab = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    getList() {
      const params = {
        ...this.pageOptions,
        merchantId: this.merchantId,
        ...this.integral
      };
      this.loading = true;
      getInsuranceList(params)
        .then((res) => {
          const {insuranceCardPage ,insMerchantInsuranceTotalDTO} = res.result
          const { total, records } = insuranceCardPage;
          this.$emit('getSuccess', insMerchantInsuranceTotalDTO);
          this.tableData = records;
          this.$refs.table.pageOptions.total = total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    lookDetail(e) {

      this.$refs.reportingDetail.show(e)
      // this.$router.push({
      //   path: "/merchants/reporting-detail",
      //   query: {
      //     merchantId: this.id,
      //     assetId: e.cardId,
      //   },
      // });
    },
  },
};
</script>
<style scoped>
.assets_detail {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px;
  margin-top: 20px;
}
.assets_H {
  display: flex;
  /* align-items: center; */
  /* justify-content: space-between; */
  margin-bottom: 20px;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
  margin-bottom: 20px;
}
.assets_H_title{
  margin-bottom: 20px;
  width: 180px;
  margin-top: 9px;
  font-weight: 600;
  font-size: 17px;
}
</style>